<template>
  <div class="recent-articles">
    <b-list-group>
      <b-list-group-item class="asideContent-title d-flex align-items-center pb-1">
        <span class="iconfont icon-lishijilu_huaban"></span>
        <h2>最近文章</h2>
      </b-list-group-item>
      <b-list-group-item class="d-flex align-items-center">
        <nuxt-link to="#" class="overflow-hidden">
           <b-img-lazy src="https://picsum.photos/400/400/?image=20" alt=""/>
        </nuxt-link>
        <div class="recent-articles-cont">
          <h4><nuxt-link to="#">javascript基础</nuxt-link></h4>
          <span>2021-10-19</span>
        </div>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  .asideContent-title .iconfont {
    font-size: 19px;
    margin-right: 6px;
    color: var(--base-text-color);
  }
  .asideContent-title h2{
    display: inline-block;
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 0;
    color: var(--base-text-color);
  }
  
  .list-group{
    border-radius: 0.8rem;
    box-shadow: var(--card-box-shadow);
    transition: all .3s ease;
    padding: 10px 0;
    background-color: var(--block-color);
  }
  .list-group:hover {
    box-shadow: var(--card-hover-box-shadow);
  }
  .list-group-item {
    border: 0;
    background: transparent;
  }
  .recent-articles .list-group-item>a {
    width: 4.5rem;
    height: 4.4rem;
    flex-shrink: 0;
  }
  .recent-articles-cont {
    flex: 1;
    height: 4.4rem;
    padding-left: 10px;
  }
  .list-group-item .recent-articles-cont h4 {
    line-height: normal;
    margin-bottom: 5px;
  }
  .recent-articles-cont h4 a{
    font-size: 16px;
    font-weight: normal;
    color: var(--base-text-color);
    text-overflow: -o-ellipsis-lastline;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;  
  }
  .list-group-item .recent-articles-cont span {
    font-size: 13px;
    color: #9195A1;
  }
  .list-group-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s;
  }
  .recent-articles .list-group-item img:hover {
    transform: scale(1.1);
  }
  .recent-articles-cont h4 a:hover {
    color: var(--primary);
    text-decoration: none;
  }
</style>